<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/common/plateform/include/common-base.jsp" %>
        <title>黑白名单设置</title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
              name="viewport">
    </head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

    <!-- top start -->
    <%@ include file="/common/plateform/top.jsp" %>
    <!-- top end -->
    <!-- left start -->
    <%@ include file="/common/plateform/left-project.jsp" %>
    <!-- left end-->

    <div class="content-wrapper">
        <!-- Main start -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">

                    <!------搜索  start ------->
                    <div class="box box-info" id="searchForm-box">
                        <!--搜索title  start -->
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-search"></i> 黑白名单设置</h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool"
                                        data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <!--搜索title  end -->
                        <div class="box-body">

                            <form id="searchForm" class="form-horizontal" action="javascript:;">
                                <input type="hidden" name="pageName" value="sys-zuul-black">
                                <input type="hidden" name="formName" value="searchForm">
                                <div class="form-group">
                                    <div class="col-sm-2 text-right"><label class="control-label">接收IP地址：</label>
                                    </div>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" name="sysZuulBlack.wl_useIp"
                                               value=""/>
                                    </div>
                                    <div class="col-sm-2 text-right"><label class="control-label">类型：</label>
                                    </div>
                                    <div class="col-sm-4">
                                        <select class="form-control clean" name="sysZuulBlack.w_infoType">
                                            <option value="">--请选择--</option>
                                            <option value="1" remark=""> 白名单</option>
                                            <option value="0" remark=""> 黑名单</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12 text-center">
                                        <button type="button" class="btn btn-success"
                                                onclick="getTableDatas();"><i
                                                class="fa fa-search"></i> 查询
                                        </button>&nbsp;
                                        <button type="button" class="btn btn-warning"
                                                onclick="mytools.cleanData('#searchForm');">重置
                                        </button>&nbsp;
                                        <button onclick="toAdds();" class="btn btn-primary"
                                                type="button"><i class="fa fa-plus-circle"></i> 增加
                                        </button>&nbsp;
                                        <button onclick="toHistory()" class="btn btn-danger"
                                                type="button"><i class="fa fa-refresh"></i> 返回
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!------- 搜索 end -------->

                    <!------- 列表 start -------->
                    <div class="box box-success">
                        <div class="box-body">
                            <!--data-show-refresh="false" data-show-columns="true" data-show-export="true" -->
                            <table id="table-list" class="table table-bordered table-hover my-table-list"
                                   data-toolbar="#table-toolbar" data-cache="false" data-resizable="false" data-unique-id="sysZuulBlack.infoId"
                                   data-sortable="true" data-sort-order="desc" data-sort-name="sysZuulBlack.create_time"
                                   data-pagination="true" data-page-list="[10,15,20,50]" data-page-number="1" data-page-size="10">
                                <thead>
                                <tr>
                                    <th data-formatter="mytools.funPageNumber" data-align="center">序号</th>
                                    <th data-field="sysZuulBlack.useIp" >接收IP</th>
                                    <th data-field="sysZuulBlack.enabled" data-formatter="formatStatus">状态</th>
                                    <th data-field="sysZuulBlack.infoType" data-formatter="formatType">类型</th>
                                    <th data-field="sysZuulBlack.createTime" >创建时间</th>
                                    <th data-formatter="tableOptFormatter">操作</th>
                                </tr>
                                </thead>
                            </table>

                        </div>
                    </div>
                    <!------- 列表 end -------->
                </div>
            </div>
        </section>
        <!-- Main end -->

        <div class="modal fade" id="my_modal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title">
                            <font color="red">信息添加/修改</font>&nbsp;
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="submitForm" action="javascript:;">
                            <input type="hidden" name="pageName" value="sys-zuul-black"/>
                            <input type="hidden" name="formName" value="addForm" id="formName"/>
                            <input type="hidden" name="sysZuulBlack.sysName"/>
                            <input type="hidden" id="w_infoId" class="clean" data-name="sysZuulBlack.infoId" name="sysZuulBlack.w_infoId" value=""/>
                            <input type="hidden" id="formToken" name="formToken"
                                   value="${formToken}"/>

                            <div class="box-body" id="submitFormData">
                                <div>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab_1">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">接收IP：</label>
                                                <div class="col-sm-8">
                                                    <input type="text" id="useIp"
                                                           data-name="sysZuulBlack.useIp" name="sysZuulBlack.useIp"
                                                           class="form-control clean"
                                                           placeholder="此项不能为空"
                                                           data-bv-notempty="true"
                                                           data-bv-notempty-message="此项不能为空"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">状态：</label>
                                                <div class="col-sm-8 form-control-static">
                                                    <input type="radio" name="sysZuulBlack.enabled" id="enabled_1"
                                                           value="1" checked="checked"/>启用
                                                    <input type="radio" name="sysZuulBlack.enabled" id="enabled_0"
                                                           value="0"/>禁用
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">类型：</label>
                                                <div class="col-sm-8 form-control-static">
                                                    <input type="radio" name="sysZuulBlack.infoType" id="infoType_true"
                                                           value="1"/>白名单
                                                    <input type="radio" name="sysZuulBlack.infoType" id="infoType_false"
                                                           value="0" checked="checked"/>黑名单
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.tab-pane -->
                                    </div>
                                    <!-- /.tab-content -->
                                </div>
                                <!-- nav-tabs-custom -->
                            </div>
                            <div class="box-footer">
                                <button type="button" class="btn btn-success pull-left"
                                        onclick="mytools.closeModal('my_modal');">取消
                                </button>
                                <button type="button" class="btn btn-danger pull-right"
                                        onclick="saveItem('submitForm');">提 交
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>

        <script>
            var clickMenu = "zuul-route-list";
            myPage = 10;
            var $table=$('#table-list'),tableTotalRows=0;
            var defSysEname = strUtil.doNull(strUtil.getLocalStorage("sysEname"), ""),defSysCname=strUtil.doNull(strUtil.getLocalStorage("sysCname"), "");
            $(function () {
                //$("#searchForm").find("input[name='sysZuulBlack.w_sysName']").val(defSysEname);
                //1、加载分页列表数据
                // getTableDatas();
                //调用公用方法初始化bootstrapTable表单配置
                mytools.initBootstrapTable({
                    url:common_list_url,
                    searcBoxId:"#searchForm-box",
                    exportFileName:"黑白名单设置"
                });
                var allTableData = $table.bootstrapTable('getData');
                tableTotalRows=allTableData.length;
                console.log('allTableData',allTableData,tableTotalRows);
            });
            //给模态窗口内form表单内的所有支持必填项的元素注入校验
            $(".modal").on('shown.bs.modal', function () {
                $(this).find("form").each(function () {
                    var formId = $(this).attr("id");
                    if (!strUtil.isNull(formId)) {
                        formId = "#" + formId;
                        setValidate(formId);//定义add表单验证属性
                        mytools.cleanValidate(formId);//清空上次校验规则提示
                    }
                });
            });

            //读取（查询、编辑）数据
            function toLoad(id, type) {
                var paramLoadData = {};
                paramLoadData['pageName']="sys-zuul-black";
                paramLoadData['formName']="searchForm";
                paramLoadData['sysZuulBlack.w_infoId']=id;
                $("#formName").val("editForm");
                $.ajax({
                    type: 'get', url: common_info_url, dataType: 'json',
                    data: paramLoadData,
                    success: function (myData) {
                        showData(type, myData);
                    }
                });
            }

            function del(infoId){
                layer.confirm('您确认要删除此服务吗？', { btn: ['确认','取消'] },
                    function(){
                        $.ajax({type:'post', url:common_submit_url, dataType:'json',
                            data:{'pageName':'sys-zuul-black','formName':'delForm','sysZuulBlack.w_infoId':infoId},
                            success: function(myData){
                                if(myData.flag=='T'){
                                    layer.alert('删除操作成功！');
                                    getTableDatas();
                                }else{
                                    layer.alert('操作失败！'+myData.msg);
                                }
                            }
                        });
                    },
                    function(){}
                );
            }

            function toAdds() {
                mytools.cleanData('#submitForm');
                $("#my_modal").modal("show");
                $("#formName").val("addForm");
                initRadio("sysZuulBlack.enabled", "1");
                initRadio("sysZuulBlack.infoType", "0");
            }

            //反显数据
            function showData(type, myData) {
                FormUtil.loadView("sysZuulBlack", myData["sysZuulBlack"]);
                if ("view" == type) {
                    $("#my_modal_view").modal("show");
                } else if ("edit" == type) {
                    $("#submitForm").find("input[name='formName']").val("editForm");
                    initRadio("sysZuulBlack.enabled", myData["sysZuulBlack"].enabled);
                    initRadio("sysZuulBlack.infoType", myData["sysZuulBlack"].infoType);
                    $("#my_modal").modal("show");
                }
            }

            function saveItem(formId) {
                var validate = $('#' + formId).data('bootstrapValidator').validate();
                if (!validate.isValid()) { //如果校验不通过就返回
                    return;
                }
                var index_submit = layer.confirm('确认提交操作吗？', {
                        btn: ['确认', '取消'],
                        closeBtn: 0,
                        offset: '220px'
                    }
                    , function () {
                        $("#submitForm").find("input[name='sysZuulBlack.sysName']").val(defSysEname);
                        layer.close(index_submit);
                        $.ajax({
                            type: 'post', url: common_submit_url, dataType: 'json',
                            data: $("#" + formId).serialize(),
                            success: function (myData) {
                                console.log(myData);
                                if (myData.flag == 'T') {
                                    getTableDatas();
                                } else {
                                    layer.alert(myData.msg, {
                                        icon: 1,
                                        closeBtn: 0,
                                        offset: '220px'
                                    });
                                }
                                mytools.closeModal("my_modal");
                            }
                        });
                    });
            }

            function getTableDatas() {
                $table.bootstrapTable("refresh");
            }

            function initRadio(elemname, selVl) {
                var myobj = document.getElementsByName(elemname);
                if (myobj == null) return;
                for (var i = 0; i < myobj.length; i++) {
                    if (myobj[i].value == selVl) {
                        myobj[i].checked = "true";
                    }
                }
            }

            //1.定义校验规则-定义
            function setValidate(id) {
                $(id).each(function () {
                    $(this).bootstrapValidator({
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        }, /** 以下需要结合实际业务清空补充个表单元素的验证规则 **/
                        fields: {
                            /** 可自定义新增验证规则
                             "uctUser.userEname":{
								validators: {
								regexp: {
								regexp: /^[0-9]+$/,
								message: '只能是数字'
								}
								}
								}
                             **/
                        }
                    });
                });
            }

            function formatStatus(value) {
                if(value=='1'){
                    return "<span class='blue'>启用</span>";
                }else{
                    return "禁用";
                }
            }

            function formatType(value) {
                if(value=='1'){
                    return "白名单";
                }else{
                    return "黑名单";
                }
            }

            function tableOptFormatter(value, row, index) {
                var obj = row.sysZuulBlack;
                var infoId = obj.infoId;
                var enabled = obj.enabled;
                var htmls ="";
                htmls += "<button type=\"button\" class=\"btn btn-warning btn-xs\" onclick=\"toLoad('"+infoId+"','edit');\">修改</button>&nbsp;";
                if(enabled=='0'){
                    htmls += "<button type=\"button\" class=\"btn btn-danger btn-xs\" onclick=\"del('"+infoId+"');\">删除</button>&nbsp;";
                }
                return htmls;
            }

            function toHistory(){
                var purl = "${ctx}/sendPage/plateform/admin/project/zuul-route-list";
                mytools.pjax(purl);
            }

        </script>
    </div>
    <!-- /.content-wrapper -->
    <!-- foot start -->
    <%@ include file="/common/plateform/foot.jsp"%>
    <!-- foot start -->


</body>


</html>
